<template>
	<m-layout gap="0 24" title="奖励中心" :goBack="false">
		<view class="head " slot="header">
			<view class="ul flex">
				<view class="li flex-column" :class="{ active: tabIdx == item.idx }" v-for="(item, index) in priceList"
					:key="index" @click="tabIdx = item.idx">
					<text class="ws-nowrap">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<!-- 奖励列表 -->
		<m-block class="flex-1 dataList mt-16" :isLoading="isLoading" bgColor="unset">
			<m-block class="ptb-24  plr-24 mb-16" v-for="(item,index) in listArr">
				<view class="flex-between ai-flex-start">
					<m-image :size="60" src="../../static/images/pages/reward-center/reward.png"></m-image>
					<view class="dataList-content flex-1 ml-12">
						<view class="h1 flex-between">
							<text>金额</text>
							<text>{{item.state==1?'+':''}}{{item.rewardamount}}</text>
						</view>
						<view class="h2 ai-baseline ">
							<text>摘要：</text>
							<text class=" flex-1">{{item.content}}</text>
						</view>
						<view class="h3 flex-between">
							<text>{{item.ctime.replace('T',' ')}}</text>
							<text v-if="item.state==1">已发放</text>
						</view>
						
					</view>
				</view>
				<!-- <view v-if="tabIdx==3" class="flex jc-center mt-16"  @click="Jump(`/pages/home/reward-center/creditDetail/creditDetail?creditday=${item.inday}&total=${item.fwtotal}&credittype=2`)" >
					<text class="fs24 recordDetail">明细</text>
				</view> -->
			</m-block>
			<m-loading class="more pb-60" gap="100 0" :list='listArr' :pageIndex="pageIndex" :pageCount="pageCount"
				:loading="isLoading" title="暂无数据" />
			<!-- <m-empty :list="listArr"></m-empty> -->
		</m-block>
	</m-layout>
</template>

<script>
	import { creditTotal, creditdetal } from "@/api/Trade.js"
	export default {
		name: '',
		data() {
			return {
				myTotal: {}, //  我的个人业绩
				scrollTop: 0,
				tabIdx: 5, //  11---直推   12--- 间推  
				priceList: [
					{
						title: '每日分润',
						idx: 5
					},
					{
						title: '销售奖',
						idx: 16
					},
					{
						title: '管理奖',
						idx: 11
					},
					{
						title: '代理奖',
						idx: 12
					},
				],
				listArr: [], // 商品列表
				pageSize: 10,
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
			};
		},
		watch: {
			tabIdx(val) {
				console.log('val', val)
				this.init();
			}
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onShow() {
			// this.getMyTotal()
			this.init();
		},
		methods: {
			init() {
				this.isLoading = true;
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			async getMyTotal() {
				const { success, msg, data } = await creditTotal();
				this.myTotal = data;
			},
			// 获取分页数据数据
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				const { success, list, pageCount } = await creditdetal({
					Credittype: this.tabIdx,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	};
</script>

<style lang="scss">
	page {

		// background: url('../../../static/images/pages/reward-center/bg.png') no-repeat;
		// background-size: 100% 300rpx;
		// background-color: #F6F6F6;
	}

	.head {
		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%) !important;
		padding: 0 24rpx 10rpx;
		margin: 0;

		.ul {
			overflow-x: auto;

			.li {
				padding-bottom: 12rpx;
				min-width: 60rpx;
				margin-right: 36rpx;

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666;
				}
			}

			.active {
				background: linear-gradient(0deg, var(--theme) 0%, rgba(251, 251, 251, 0.6) 22%) no-repeat;

				text {
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}

	.recordDetail {
		flex: 1;
		color: #30c64f;
		background-color: #e7f1dc;
		text-align: center;
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
	}

	.dataList-content {
		padding-left: 10rpx;
		.h1 {
			text {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			text:nth-of-type(2){
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #333333;
			}
		}
		.h2{
			padding: 15rpx 0;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		.h3{
			text:nth-of-type(1){
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			text:nth-of-type(2){
				padding: 5rpx 15rpx;
				background: #FFF7D4;
				border-radius: 8rpx;
				
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #EFC400;
			}
		}
	}
</style>